<template>
  <div v-if="data" class="bigBox" ref="bigBox" @scroll="bigBoxScroll">
    <BHeader :keyword="kw" />
    <div class="videoPage">
      <div class="v_left">
        <p class="v_title">{{ data.title }}</p>
        <div class="tit_info">
          <span class="title_inner">{{ data.play | playFil }}播放</span
          ><span class="title_inner"
            >· 总弹幕数{{ data.totalDm | playFil }}</span
          >
          <span>{{ data.time }}</span>
        </div>
        <div>
          <iframe
            class="video"
            :src="'https://' + data.src"
            scrolling="no"
            border="0"
            frameborder="no"
            framespacing="0"
            allowfullscreen="true"
          ></iframe>
        </div>
        <div>
          <div class="v_middle">
            <div
              class="v_opt"
              :class="{ opt_on: optState.opt1 }"
              @click="optChange(1)"
            >
              <van-icon name="good-job" class="optIcon" />
              <span>{{ data.awe | playFil }}</span>
            </div>
            <div
              class="v_opt"
              :class="{ opt_on: optState.opt2 }"
              @click="optChange(2)"
            >
              <van-icon name="gold-coin" class="optIcon" />
              <span>{{ data.coin | playFil }}</span>
            </div>
            <div
              class="v_opt"
              :class="{ opt_on: optState.opt3 }"
              @click="optChange(3)"
            >
              <van-icon name="star" class="optIcon" />
              <span>{{ data.collect | playFil }}</span>
            </div>
            <div class="v_opt">
              <van-icon name="share" class="optIcon" />
              <span>{{ data.repost | playFil }}</span>
            </div>
          </div>
          <div class="v_desc">
            <div class="rightDesc">
              <i class="el-icon-warning-outline" style="color: #fd676f"></i>
              未经作者授权，禁止转载
            </div>
            <div class="descTxt" v-html="data.content"></div>
            <div v-if="data.hidden_txt">
              <div v-show="showMore">
                <div v-html="data.hidden_txt"></div>
              </div>
              <div
                class="showMore"
                @click="showMore = !showMore"
                v-html="showMore ? '点击收起详情' : '点击查看更多'"
              ></div>
            </div>
            <div class="tags">
              <div class="tag" v-for="(item, index) in data.tags" :key="index">
                {{ item }}
              </div>
            </div>
          </div>
          <div class="coment_area">
            <div class="com_count">
              <span style="margin-right: 20px">{{ commentCount }}</span
              >评论
            </div>
            <div
              class="inp_wrap"
              ref="inpWrap"
              :class="{ changeInpPo, textarea2: changeInpPo }"
            >
              <img
                src="/img/head.webp"
                alt=""
                class="head_big"
                v-show="!changeInpPo"
              />
              <div class="inp_area" :class="{ txt_ipt: iptState }">
                <van-field
                  v-model="comment"
                  rows="1"
                  autosize
                  type="textarea"
                  :placeholder="placeholder"
                  @focus="iptState = true"
                  @blur="iptState = false"
                />
              </div>
              <button
                class="btn"
                :class="{ btn2: changeInpPo }"
                @click="subComment"
              >
                发表评论
              </button>
            </div>
            <hr class="slice" />
            <div
              class="single_comment_wrap"
              v-for="(item, index) in data.comment"
              :key="index"
            >
              <img :src="`/img/${item.head}`" alt="" class="comment_head" />
              <div class="comment_content">
                <div class="com_info">
                  <p>
                    <span class="single_name">{{ item.uname }}</span>
                    <img
                      :src="`/img/lv${item.level}.png`"
                      alt=""
                      class="lvImg"
                    />
                  </p>
                  <p class="txt" v-html="item.content"></p>
                  <p>
                    <span class="single_time">{{ item.time }}</span
                    ><span
                      class="single_awe"
                      @click="commentAwe('comment', index)"
                      ><van-icon
                        name="good-job"
                        class="aweIcon"
                        :class="{ coloredAwe: item.state }"
                      />{{ item.awe }}</span
                    >
                    <span class="single_noawe"
                    @click="commentNoAwe('comment', index)"
                      ><van-icon
                        name="good-job"
                        class="aweIcon"
                        :class="{ coloredAwe: item.antiState }" /></span
                    ><span
                      class="single_reply fontChange"
                      @click="subReply(index)"
                      >回复</span
                    >
                    <!-- 评论回复 -->
                  </p>
                </div>
                <div v-for="(itm, idx) in item.replies" :key="idx">
                  <div class="reply_info">
                    <img :src="`/img/${itm.head}`" alt="" class="replyImg" />
                    <div class="com_reply">
                      <div>
                        <span>{{ itm.uname }}</span>
                        <p
                          style="display: inline-block; margin-right: 18px"
                          v-if="itm.replyTarget"
                        >
                          <img
                            class="lvImg"
                            :src="`/img/lv${itm.level}.png`"
                            alt=""
                          />
                          <span class="fontChange" @click="subReply(index, idx)"
                            >回复</span
                          >
                          <!-- 回复评论中的回复 -->
                          <span class="replyTo"> @{{ itm.replyTarget }}</span>
                        </p>
                        <p
                          style="display: inline-block; margin-right: 18px"
                          v-else
                        >
                          <img
                            class="lvImg"
                            :src="`/img/lv${itm.level}.png`"
                            alt=""
                          />
                        </p>
                        <span v-html="genEmoji(itm.content)"></span>
                        <div>
                          <p>
                            <span class="single_time">{{ itm.time }}</span>
                            <span
                              @click="commentAwe('reply', index, idx)"
                              class="single_awe"
                              ><van-icon
                                name="good-job"
                                class="aweIcon"
                                :class="{ coloredAwe: itm.state }"
                              />
                              {{ itm.awe }}</span
                            >
                            <span
                              class="single_noawe"
                              @click="commentNoAwe('reply', index, idx)"
                              ><van-icon name="good-job" :class="{ coloredAwe: itm.antiState }"/></span
                            ><span
                              class="single_reply fontChange"
                              @click="subReply(index, idx)"
                              >回复</span
                            >
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div></div>
                </div>
              </div>
            </div>
            <div style="height: 100px"></div>
          </div>
        </div>
      </div>
      <div class="v_right">
        <div class="right_title">
          <div class="tit">接下来播放</div>
          <div class="tit_switch">
            <el-switch
              v-model="isLoop"
              active-color="#00A1D6"
              inactive-color="#e7e7e7"
              inactive-text="自动连播"
            >
            </el-switch>
          </div>
        </div>
        <div class="rcmd_wrap">
          <div
            class="rcmd_single"
            v-for="(item, index) in data.rcmd"
            :key="index"
            @click="jumpVideo(item.title, item.id)"
          >
            <img :src="'/img/' + item.img" alt="" />
            <div class="r_info">
              <div class="info_tit">
                <p style="color: #000">{{ item.title }}</p>
              </div>
              <div>
                <p>{{ item.uname }}</p>
                <span style="margin-right: 20px"
                  >{{ item.play | playFil }} 播放</span
                ><span>{{ item.dm | playFil }} 弹幕</span>
              </div>
            </div>
          </div>
          <div
            class="rcmd_single"
            v-for="(item, index) in data.rcmd"
            :key="index + 10"
            @click="jumpVideo(item.title, item.id)"
            v-show="isMax"
          >
            <img :src="'/img/' + item.img" alt="" />
            <div class="r_info">
              <div class="info_tit">
                <p style="color: #000">{{ item.title }}</p>
              </div>
              <div>
                <p>{{ item.uname }}</p>
                <span style="margin-right: 20px"
                  >{{ item.play | playFil }} 播放</span
                ><span>{{ item.dm | playFil }} 弹幕</span>
              </div>
            </div>
          </div>
          <div
            class="unfold"
            @click="loadMore"
            v-html="isMax ? `收起` : `展开`"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BHeader from "../components/BHeader.vue";
import { Field } from "vant";
import moment from "moment";
export default {
  components: { BHeader, [Field.name]: Field },
  data() {
    return {
      data: null,
      isLoop: false,
      showMore: false,
      optState: {
        opt1: false,
        opt2: false,
        opt3: false,
        opt4: false,
      },
      isMax: false,
      showMoreRcmd: false,
      comment: "",
      iptState: false,
      changeInpPo: false,
      cidx1: "",
      cidx2: "",
      placeholder: "说点好听的吧",
      foldState: [
        '<van-icon name="arrow-down" />展开',
        `<van-icon name="arrow-up" />收起`,
      ],
    };
  },
  props: ["kw", "vid"],
  methods: {
    bigBoxScroll({ target }) {
      // console.dir(this.$refs.inpWrap);
      if (target.scrollTop >= this.$refs.inpWrap.offsetTop) {
        this.changeInpPo = true;
        return;
      }
      this.changeInpPo = false;
    },
    subReply(i, i2) {
      if (i2 === undefined) {
        this.placeholder = "回复 @" + this.data.comment[i].uname;
        this.cidx1 = i;
      } else {
        this.placeholder = "回复 @" + this.data.comment[i].replies[i2].uname;
        this.cidx1 = i;
        this.cidx2 = i2;
      }
    },
    subComment() {
      if (!this.comment.trim()) {
        this.$msg({ message: "输入不能为空", type: "error" });
        return;
      }
      let { cidx1, cidx2 } = this;
      // console.log(cidx1, cidx2);
      if (!this.isLogin) {
        this.$msgbox
          .confirm("是否跳转至登录页?", "未登录", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            center: true,
          })
          .then(() => {
            this.$router.push("/login");
          })
          .catch(() => {
            this.$msg({
              type: "info",
              message: "已取消",
              duration: 1000,
            });
          });
        return;
      }
      if (cidx1 === "" && cidx2 === "") {
        this.data.comment.push({
          head: "head.webp",
          uid: 16666,
          uname: localStorage.getItem("uid") || sessionStorage.getItem("uid"),
          level: 5,
          time: moment().format("YYYY-MM-DD HH:mm:ss"),
          awe: 0,
          replyTarget: "",
          content: this.comment.replace(/\</g, "&lt").replace(/\>/g, "&gt"),
          replies: [],
          state: false,
          antiState:false,
        });
      } else {
        let replyTarget;
        if (cidx1 !== "" && cidx2 === "") {
          replyTarget = "";
        } else {
          replyTarget = this.data.comment[cidx1].replies[cidx2].uname;
        }
        this.data.comment[this.cidx1].replies.push({
          head: "head.webp",
          uid: 16666,
          uname: localStorage.getItem("uid") || sessionStorage.getItem("uid"),
          level: 5,
          time: moment().format("YYYY-MM-DD HH:mm:ss"),
          awe: 0,
          replyTarget,
          content: this.comment.replace(/\</g, "&lt").replace(/\>/g, "&gt"),
          replies: [],
          state: false,
          antiState:false,
        });
      }
      this.cidx1 = "";
      this.cidx2 = "";
      this.comment = "";
      this.placeholder = "说点好听的吧";
    },
    commentAwe(type, i1, i2) {
      let { comment } = this.data;
      if (type == "comment") {
        comment[i1].state ? (comment[i1].awe -= 1) : (comment[i1].awe += 1);
        comment[i1].state = !comment[i1].state;
        // console.log(comment);
        this.data.comment = comment;
        return;
      }
      comment[i1].replies[i2].state
        ? (comment[i1].replies[i2].awe -= 1)
        : (comment[i1].replies[i2].awe += 1);
      comment[i1].replies[i2].state = !comment[i1].replies[i2].state;
      // console.log(comment);
      this.data.comment = comment;
    },
    commentNoAwe(type, i1, i2){
       let { comment } = this.data;
      if (type == "comment") {
        comment[i1].antiState = !comment[i1].antiState;
        // console.log(comment);
        this.data.comment = comment;
        return;
      }
      comment[i1].replies[i2].antiState = !comment[i1].replies[i2].antiState;
      // console.log(comment);
      this.data.comment = comment;
    },
    genEmoji(txt) {
      txt
        .replace(/[ok]/, '<img src="/img/ok.webp"/>')
        .replace(/[doge]/, '<img src="/img/doge.webp"/>');
      return txt;
    },
    getVdata() {
      let url = `http://${location.host}/comics/data/${this.vid}.json`;
      // console.log(url);
      this.axios.get(url).then((res) => {
        res.data.comment.forEach((item, index) => {
          item.state = false;
          item.antiState = false;
          item.content = item.content
            .replace(/\</g, "&lt")
            .replace(/\>/g, "&gt")
            .replace(/\[ok\]/g, '<img src="/img/ok.webp"/>')
            .replace(
              /\[doge\]/g,
              '<img style="width:18px" src="/img/doge.webp"/>'
            );
          if (item.replies.length > 0) {
            item.replies.forEach((itm, idx) => {
              itm.state = false;
              itm.antiState = false;
              itm.content = itm.content
                .replace(/\</g, "&lt")
                .replace(/\>/g, "&gt")
                .replace(/\[ok\]/g, '<img src="/img/ok.webp"/>')
                .replace(
                  /\[doge\]/g,
                  '<img style="width:18px" src="/img/doge.webp"/>'
                );
            });
          }
        });
        // console.log(res.data);
        this.data = res.data;
      });
    },
    changeTitle() {
      document.title = this.kw;
    },
    jumpVideo(info, id) {
      this.$router.push(`/video/${info}/${id}`);
      this.changeTitle();
      this.getVdata();
    },
    loadMore() {
      this.isMax = this.isMax ? false : true;
    },
    optChange(i) {
      switch (i) {
        case 1:
          this.optState.opt1 ? (this.data.awe -= 1) : (this.data.awe += 1);
          this.optState.opt1 = !this.optState.opt1;
          break;
        case 2:
          this.optState.opt2 ? (this.data.coin -= 1) : (this.data.coin += 1);
          this.optState.opt2 = !this.optState.opt2;
          break;
        case 3:
          this.optState.opt3
            ? (this.data.collect -= 1)
            : (this.data.collect += 1);
          this.optState.opt3 = !this.optState.opt3;
          break;
        default:
          break;
      }
    },
  },
  mounted() {
    this.changeTitle();
    this.getVdata();
  },
  computed: {
    commentCount() {
      let l = 0;
      if (this.data.comment) {
        this.data.comment.forEach((item) => {
          l += item.replies.length;
        });
        l += this.data.comment.length;
      }
      // console.log(l);
      return l;
    },
    isLogin() {
      if (sessionStorage.getItem("uid") || localStorage.getItem("uid")) {
        return true;
      }
      // console.log(6666666666);
      return false;
    },
  },
  filters: {
    //数量过滤器
    playFil(val) {
      let num_w = val / 1000;
      if (num_w >= 10) {
        return Math.floor(num_w) / 10 + "万";
      }
      return val;
    },
  },
  watch: {
    $route(newValue) {
      this.changeTitle();
      this.getVdata();
    },
  },
};
</script>

<style>
.bilibili-player-video-sendjumpbar {
  display: none !important;
}
.tit_switch {
  color: #999 !important;
}
textarea {
  border-radius: 4px;
  min-height: 66px;
  padding: 5px 10px !important;
  background-color: #f4f5f7;
  border: 1px solid #e5e9ef !important;
}
.textarea2 {
  min-height: 20px;
}
.replyTo {
  color: #00a1d6;
}
.txt_ipt textarea {
  border: 1px solid #00a1d6 !important;
  background-color: #fff;
}
.aweIcon {
  margin-right: 4px;
}
.single_awe {
  cursor: pointer;
}
.single_awe:hover .aweIcon {
  color: #00a1d6;
}
</style>
<style lang="scss" scoped>
.single_noawe {
  i {
    transform: rotateX(180deg);
  }
  &:hover {
    cursor: pointer;
    color: #00a1d6 !important;
  }
}
.bigBox {
  height: 100vh;
  overflow: scroll;
}
.coloredAwe {
  color: #00a1d6;
}
.tit_info {
  color: #999;
  margin-bottom: 10px;
}
.v_title {
  font-size: 18px;
  margin: 10px;
  margin-left: 0;
}
.title_inner {
  margin-right: 10px;
}
.video {
  display: block;
  width: 638px;
  height: 477px;
}
.videoPage {
  display: flex;
  justify-content: space-between;
  width: 1000px;
  margin: 20px auto;
}
.v_left {
  .v_middle {
    display: flex;
    font-size: 16px;
    color: #757575;
    margin: 10px 0 10px 0;
    .v_opt {
      display: flex;
      align-items: center;
      margin-right: 20px;
      font-size: 14px;
      line-height: 16px;
      cursor: pointer;
      &:hover {
        color: #00a1d6;
      }
      .optIcon {
        font-size: 28px;
        margin-right: 6px;
        vertical-align: middle;
      }
    }
    .opt_on {
      color: #00a1d6;
    }
    img {
      width: 28px;
      height: 28px;
    }
    span {
      display: block;
    }
  }
  .v_desc {
    font-size: 14px;
    .v_rightDesc {
      font-size: 18px;
      font-weight: bold;
    }
    .showMore {
      color: #999;
      margin: 4px 0 20px 0;
      &:hover {
        cursor: pointer;
        color: #00a1d6;
      }
    }
  }
  .descTxt {
    margin: 30px 0 30px 0;
  }
  .tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .tag {
      padding: 2px 12px;
      margin: 0 8px 10px 0;
      background-color: #f6f7f8;
      border: 1px solid transparent;
      border-radius: 100px;
      transition: 0.2s linear;
      height: 16px;
      line-height: 16px;
      &:hover {
        cursor: pointer;
        color: #00a1d6;
        border: 1px solid #00a1d6;
      }
    }
  }
  .coment_area {
    .com_count {
      margin: 20px 20px;
      font-size: 18px;
    }
    .inp_wrap {
      padding: 26px;
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: space-between;
      transition: 1s linear;
    }
    .changeInpPo {
      position: fixed;
      z-index: 9;
      bottom: 0px;
    }
    .slice {
      width: 554px;
      margin-left: 90px;
      border-top: rgb(131, 128, 128);
    }
    .single_comment_wrap {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 8px 24px;
      white-space: normal;
      word-break: break-all;
      font-size: 14px;
      .comment_head {
        display: block;
        height: 48px;
        width: 48px;
        border-radius: 50%;
        margin-right: 20px;
      }
      .comment_content {
        width: 560px;
        .com_info {
          .single_name {
            color: #fb7299;
          }
          .single_noawe i {
            transform: rotateX(180deg);
          }
          .single_time,
          .single_awe,
          .single_noawe,
          .single_reply {
            margin-right: 10px;
            color: #99a2aa;
            user-select: none;
          }
          .lvImg {
            // margin: 0 0 8px 16px;
            width: 22px;
            height: 22px;
            margin-left: 12px;
            vertical-align: middle;
          }
          .txt {
            width: 550px;
            font-size: 14px;
            margin-bottom: 8px;
          }
        }
        .reply_info {
          margin: 10px 12px 10px 0;
          display: flex;
          vertical-align: baseline;
          .replyImg {
            display: block;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-right: 8px;
          }
          .lvImg {
            vertical-align: middle;
            width: 22px;
            height: 22px;
            margin-right: 12px;
            margin-left: 12px;
          }
          .single_name {
            color: #fb7299;
          }
          .single_time,
          .single_awe,
          .single_noawe,
          .single_reply {
            user-select: none;
            margin-right: 10px;
            font-size: 14px;
            color: #99a2aa;
          }
          .lvImg {
            width: 22px;
            height: 22px;
          }
          .txt {
            width: 550px;
            white-space: wrap;
            margin-bottom: 8px;
          }
        }
      }
    }

    .inp_area {
      width: 500px;
    }
    .head_big {
      display: block;
      width: 48px;
      height: 48px;
      border-radius: 50%;
    }
    .btn {
      display: block;
      width: 70px;
      height: 64px;
      border-radius: 4px;
      padding: 4px 15px;
      font-size: 14px;
      color: white;
      background-color: #00a1d6;
      &:hover {
        background-color: #00b5e5;
      }
    }
    .btn2 {
      width: 70px;
      height: 36px;
      padding: 2px;
    }
  }
}
.v_right {
  width: 320px;
  .right_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    vertical-align: baseline;
    .tit {
      font-size: 18px;
      font-weight: bold;
    }
  }
  .rcmd_wrap {
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    .rcmd_single {
      display: flex;
      justify-content: space-between;
      margin-top: 14px;
      img {
        display: block;
        border-radius: 4px;
        width: 141px;
      }
      .r_info {
        width: 169px;
        height: 80px;
        margin-left: 10px;
        color: #999;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .info_tit {
          font-size: 14px;
          height: 37px;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    .unfold {
      cursor: pointer;
      width: 320px;
      height: 42px;
      margin-top: 20px;
      line-height: 42px;
      text-align: center;
      font-size: 18px;
      border-radius: 4px;
      color: #6d7579;
      background-color: #f4f5f7;
    }
  }
}
</style>
